<template>
	<view>
		<view class="content" v-if="dataList.length < 1">
			<u-empty text="所谓伊喵，早起暴富" mode="list"></u-empty>
		</view>
		<view v-else>
			<view>
				<view v-for="item in dataList" :key="item.id"
					style="display: flex;justify-content: center;border-radius: 25rpx;">
					<view style="display: flex;width: 99%;border-radius: 25rpx;margin: 1% 0;">
						<view
							style="background: radial-gradient(circle, rgba(238,174,202,1) 20%, rgba(171,184,225,1) 67%, rgba(148,187,233,1) 84%);width: 20%;height: 100%;display: flex;justify-content: center;align-items: center;border-radius: 25rpx 0 0 25rpx;">
							<u-avatar :src="item.avatar" size="large" @click="pageToMine()"></u-avatar>
						</view>
						<view style="width: 80%;background-color: #ffffff;">
							<u-cell-group>
								<u-cell-item icon="bag-fill" :title="item.moneyTitle" value="查看账单" :arrow="true"
									@click="pageToMoneyDetail(item)"></u-cell-item>
								<u-cell-item icon="red-packet-fill" title="额度" :value="item.moneyTotal+'元'"
									:arrow="false"></u-cell-item>
								<u-cell-item icon="red-packet" title="余额" :value="item.balanceTotal+'元'"
									:arrow="false"></u-cell-item>
								<u-cell-item icon="zhifubao-circle-fill" title="提额" value="点击提额" :arrow="true"
									v-if="item.isEdit" @click="openShowOfMoney(item.id)"></u-cell-item>
								<u-cell-item icon="zhifubao-circle-fill" title="消费" value="点击记录" :arrow="true"
									v-if="item.isEdit" @click="openShow(item.id)"></u-cell-item>
							</u-cell-group>
							<view style="padding:2.5% 5%;">
								<u-line-progress :striped="true" :percent="item.percent" :striped-active="true"
									:round="true" :active-color="getItemActiveColor(item.percent)"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore status="nomore" />
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getMoneyList
	} from '@/api/bot/money'
	import config from '@/config'
	export default {
		name: "Whispers",
		props: ['query'],
		data() {
			return {
				dataList: [],
				baseUrl: config.baseUrl,
			};
		},
		mounted() {
			this.getMoneyList()
		},
		watch: {
			query(newValue, oldValue) {
				if (newValue.pageNum == 1) {
					this.dataList = []
				}
				this.getMoneyList()
			}
		},
		methods: {
			getMoneyList() {
				uni.showLoading({
					title: "加载中..."
				})
				uni.getStorage({
					key: 'groupIdByIndex',
					success: (res) => {
						let data = JSON.parse(res.data);
						let groupId = data.id;
						let query = {
							...this.query,
							groupId: groupId
						}
						this.getList(query)
					}
				});
			},
			getList(query) {
				const currentUserId = this.$store.getters.userId;
				getMoneyList(query).then(res => {
					res.rows.forEach(element => {
						// 更新头像 URL
						element.avatar = this.baseUrl + element.avatar;
						// 计算百分比并修正到整数
						element.percent = (element.balanceTotal / element.moneyTotal * 100).toFixed(0);
						// 默认设置为不可编辑
						element.isEdit = false;
						// 如果当前用户ID匹配，则标记为可编辑
						if (element.userId === currentUserId) {
							element.isEdit = true;
						} else if (element.sysUserList != null && element.sysUserList.length > 0) {
							// 检查当前用户是否在sysUserList中的某个用户列表里
							element.isEdit = element.sysUserList.some(user => user.userId ===
								currentUserId);
						}
					});
					// 将处理后的数据追加到dataList
					this.dataList = this.dataList.concat(res.rows);
					uni.hideLoading()
				});
			},
			pageToMoneyDetail(item) {
				item.path = 'index';
				const formDataStr = JSON.stringify(item);
				this.$tab.navigateTo('/pages/detail/moneyDetail?formData=' + encodeURIComponent(formDataStr))
			},
			openShow(id) {
				let obj = {
					type: 1,
					id: id
				}
				this.$emit("refresh", obj)
			},
			openShowOfMoney(id) {
				let obj = {
					type: 2,
					id: id
				}
				this.$emit("refresh", obj)
			},
			getItemActiveColor(percent) {
				if (percent >= 50) {
					return '#19be6b';
				} else if (percent >= 15) {
					return '#ff9900';
				} else {
					return '#fa3534';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10%;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.moneyRect {
		width: 300px;
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 18px;
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.moneyContent {
		height: 80%;
		display: flex;
		flex-direction: column;
		padding: 5rpx 15rpx;
	}

	.button-group {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
</style>